<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../../images/favicon.ico">

    <title>洲博通 - Dashboard General UI </title>

    <!-- Bootstrap 4.0-->
    <link rel="stylesheet" href="../../../assets/vendor_components/bootstrap/dist/css/bootstrap.min.css">

    <!-- Bootstrap extend-->
    <link rel="stylesheet" href="../../css/bootstrap-extend.css">

    <!-- Theme style -->
    <link rel="stylesheet" href="../../css/master_style.css">

    <!-- 洲博通 skins -->
    <link rel="stylesheet" href="../../css/skins/_all-skins.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
	<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->



  </head>

  <body class="sidebar-collapse skin-blue sidebar-mini">
  <b data-toggle="push-menu" style="display:none"></b>
    <div class="wrapper">


      <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
          <h1>
            General UI
          </h1>
          <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
            <li class="breadcrumb-item"><a href="#">UI</a></li>
            <li class="breadcrumb-item active">General</li>
          </ol>
        </section>

        <!-- Main content -->
        <section class="content">

          <!-- START TYPOGRAPHY -->
          <h2 class="page-header">Typography</h2>

          <div class="row">
            <div class="col-md-12 col-lg-6">
              <div class="box box-solid bg-dark">
                <div class="box-header with-border">
                  <h4 class="box-title">Headlines</h4>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                  <h1>h1. Bootstrap heading</h1>
                  <h2>h2. Bootstrap heading</h2>
                  <h3>h3. Bootstrap heading</h3>
                  <h4>h4. Bootstrap heading</h4>
                  <h5>h5. Bootstrap heading</h5>
                  <h6>h6. Bootstrap heading</h6>
                </div>
                <!-- /.box-body -->
              </div>
              <!-- /.box -->
              <div class="box box-solid bg-dark">
                <div class="box-header with-border">
                  <h4 class="box-title">Heading with subtitle</h4>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                  <h1>h1. heading <small>Sub-heading</small></h1>
                  <h2>h2. heading <small>Sub-heading</small></h2>
                  <h3>h3. heading <small>Sub-heading</small></h3>
                  <h4>h4. heading <small>Sub-heading</small></h4>
                  <h5>h5. heading <small>Sub-heading</small></h5>
                  <h6>h6. heading <small>Sub-heading</small></h6>
                </div>
                <!-- /.box-body -->
              </div>
              <!-- /.box -->
            </div>
            <!-- ./col -->
            <div class="col-md-12 col-lg-6">
              <div class="box box-solid bg-dark">
                <div class="box-header with-border">
                  <h4 class="box-title">Text Emphasis</h4>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                  <p class="lead">Lead to emphasize importance</p>

                  <p class="text-success">Text success to emphasize success</p>

                  <p class="text-info">Text info to emphasize info</p>

                  <p class="text-primary">Text primary to emphasize primary</p>

                  <p class="text-secondary">Text secondary to emphasize secondary</p>

                  <p class="text-danger">Text danger to emphasize danger</p>

                  <p class="text-warning">Text warning to emphasize warning</p>

                  <p class="text-muted">Text muted to emphasize general</p>

                  <p class="text-dark">Text dark to emphasize dark</p>
                </div>
                <!-- /.box-body -->
              </div>
              <!-- /.box -->
              <div class="box box-solid bg-dark">
                <div class="box-header with-border">
                  <h4 class="box-title">Alignment text</h4>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                  <p class="text-left">Left aligned text on all viewport sizes.</p>
                  <p class="text-center">Center aligned text on all viewport sizes.</p>
                  <p class="text-right">Right aligned text on all viewport sizes.</p>
                </div>
                <!-- /.box-body -->
              </div>
              <!-- /.box -->
              <div class="box box-solid bg-dark">
                <div class="box-header with-border">
                  <h4 class="box-title">Font weight and italics</h4>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                  <p class="font-weight-bold">Bold text.</p>
                  <p class="font-weight-normal">Normal weight text.</p>
                  <p class="font-italic">Italic text.</p>
                </div>
                <!-- /.box-body -->
              </div>
              <!-- /.box -->
            </div>
            <!-- ./col -->
          </div>
          <!-- /.row -->

          <div class="row">
            <div class="col-md-12 col-lg-6">
              <div class="box box-solid bg-dark">
                <div class="box-header with-border">
                  <h4 class="box-title">Block Quotes</h4>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                  <blockquote class="blockquote">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                    <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite>
                    </footer>
                  </blockquote>
                </div>
                <!-- /.box-body -->
              </div>
              <!-- /.box -->
            </div>
            <!-- ./col -->
            <div class="col-md-12 col-lg-6">
              <div class="box box-solid bg-dark">
                <div class="box-header with-border">
                  <h4 class="box-title">Block Quotes Pulled Right</h4>
                </div>
                <!-- /.box-header -->
                <div class="box-body clearfix">
                  <blockquote class="blockquote blockquote-reverse">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                    <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite>
                    </footer>
                  </blockquote>
                </div>
                <!-- /.box-body -->
              </div>
              <!-- /.box -->
            </div>
            <!-- ./col -->
          </div>
          <!-- /.row -->

          <div class="row">
            <div class="col-md-12 col-lg-4">
              <div class="box box-solid bg-dark">
                <div class="box-header with-border">
                  <h4 class="box-title">Unordered List</h4>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                  <ul>
                    <li>Lorem ipsum dolor sit amet</li>
                    <li>Consectetur adipiscing elit</li>
                    <li>Integer molestie lorem at massa</li>
                    <li>Facilisis in pretium nisl aliquet</li>
                    <li>Nulla volutpat aliquam velit
                      <ul>
                        <li>Phasellus iaculis neque</li>
                        <li>Purus sodales ultricies</li>
                        <li>Vestibulum laoreet porttitor sem</li>
                        <li>Ac tristique libero volutpat at</li>
                      </ul>
                    </li>
                    <li>Faucibus porta lacus fringilla vel</li>
                    <li>Aenean sit amet erat nunc</li>
                    <li>Eget porttitor lorem</li>
                  </ul>
                </div>
                <!-- /.box-body -->
              </div>
              <!-- /.box -->
            </div>
            <!-- ./col -->
            <div class="col-md-12 col-lg-4">
              <div class="box box-solid bg-dark">
                <div class="box-header with-border">
                  <h4 class="box-title">Ordered Lists</h4>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                  <ol>
                    <li>Lorem ipsum dolor sit amet</li>
                    <li>Consectetur adipiscing elit</li>
                    <li>Integer molestie lorem at massa</li>
                    <li>Facilisis in pretium nisl aliquet</li>
                    <li>Nulla volutpat aliquam velit
                      <ol>
                        <li>Phasellus iaculis neque</li>
                        <li>Purus sodales ultricies</li>
                        <li>Vestibulum laoreet porttitor sem</li>
                        <li>Ac tristique libero volutpat at</li>
                      </ol>
                    </li>
                    <li>Faucibus porta lacus fringilla vel</li>
                    <li>Aenean sit amet erat nunc</li>
                    <li>Eget porttitor lorem</li>
                  </ol>
                </div>
                <!-- /.box-body -->
              </div>
              <!-- /.box -->
            </div>
            <!-- ./col -->
            <div class="col-md-12 col-lg-4">
              <div class="box box-solid bg-dark">
                <div class="box-header with-border">
                  <h4 class="box-title">Unstyled List</h4>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                  <ul class="list-unstyled">
                    <li>Lorem ipsum dolor sit amet</li>
                    <li>Consectetur adipiscing elit</li>
                    <li>Integer molestie lorem at massa</li>
                    <li>Facilisis in pretium nisl aliquet</li>
                    <li>Nulla volutpat aliquam velit
                      <ul>
                        <li>Phasellus iaculis neque</li>
                        <li>Purus sodales ultricies</li>
                        <li>Vestibulum laoreet porttitor sem</li>
                        <li>Ac tristique libero volutpat at</li>
                      </ul>
                    </li>
                    <li>Faucibus porta lacus fringilla vel</li>
                    <li>Aenean sit amet erat nunc</li>
                    <li>Eget porttitor lorem</li>
                  </ul>
                </div>
                <!-- /.box-body -->
              </div>
              <!-- /.box -->
            </div>
            <!-- ./col -->
          </div>
          <!-- /.row -->

          <div class="row">
            <div class="col-md-12 col-lg-6">
              <div class="box box-solid bg-dark">
                <div class="box-header with-border">
                  <h4 class="box-title">Description</h4>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                  <dl>
                    <dt>Description lists</dt>
                    <dd>A description list is perfect for defining terms.</dd>
                    <dt>Euismod</dt>
                    <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
                    <dd>Donec id elit non mi porta gravida at eget metus.</dd>
                    <dt>Malesuada porta</dt>
                    <dd>Etiam porta sem malesuada magna mollis euismod.</dd>

                  </dl>
                </div>
                <!-- /.box-body -->
              </div>
              <!-- /.box -->
            </div>
            <!-- ./col -->
            <div class="col-md-12 col-lg-6">
              <div class="box box-solid bg-dark">
                <div class="box-header with-border">
                  <h4 class="box-title">Description Horizontal</h4>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                  <dl class="dl-horizontal">
                    <dt>Description lists</dt>
                    <dd>A description list is perfect for defining terms.</dd>
                    <dt>Euismod</dt>
                    <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
                    <dd>Donec id elit non mi porta gravida at eget metus.</dd>
                    <dt>Malesuada porta</dt>
                    <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
                    <dt>Felis euismod semper eget lacinia</dt>
                    <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa
                      justo
                      sit amet risus.
                    </dd>
                  </dl>
                </div>
                <!-- /.box-body -->
              </div>
              <!-- /.box -->
            </div>
            <!-- ./col -->
          </div>
          <!-- /.row -->
          <!-- END TYPOGRAPHY -->

          <!-- START PROGRESS BARS -->
          <h2 class="page-header">Progress Bars</h2>

          <div class="row">
            <div class="col-md-12 col-lg-6">
              <div class="box box-solid bg-dark">
                <div class="box-header with-border">
                  <h4 class="box-title">Progress Bars Different Sizes</h4>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                  <p><code>.progress</code></p>

                  <div class="progress">
                    <div class="progress-bar progress-bar-primary progress-bar-striped" role="progressbar"
                      aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                      <span class="sr-only">40% Complete (success)</span>
                    </div>
                  </div>
                  <p>Class: <code>.sm</code></p>

                  <div class="progress progress-sm active">
                    <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar"
                      aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
                      <span class="sr-only">20% Complete</span>
                    </div>
                  </div>
                  <p>Class: <code>.xs</code></p>

                  <div class="progress progress-xs">
                    <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar"
                      aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                      <span class="sr-only">60% Complete (warning)</span>
                    </div>
                  </div>
                  <p>Class: <code>.xxs</code></p>

                  <div class="progress progress-xxs">
                    <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar"
                      aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                      <span class="sr-only">60% Complete (warning)</span>
                    </div>
                  </div>
                </div>
                <!-- /.box-body -->
              </div>
              <!-- /.box -->
            </div>
            <!-- /.col (left) -->
            <div class="col-md-12 col-lg-6">
              <div class="box box-solid bg-dark">
                <div class="box-header with-border">
                  <h4 class="box-title">Progress bars</h4>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                  <div class="progress">
                    <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="40"
                      aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                      <span class="sr-only">40% Complete (primary)</span>
                    </div>
                  </div>
                  <div class="progress">
                    <div class="progress-bar progress-bar-default" role="progressbar" aria-valuenow="30"
                      aria-valuemin="0" aria-valuemax="100" style="width: 30%">
                      <span class="sr-only">30% Complete (default)</span>
                    </div>
                  </div>
                  <div class="progress">
                    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"
                      aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                      <span class="sr-only">40% Complete (success)</span>
                    </div>
                  </div>
                  <div class="progress">
                    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0"
                      aria-valuemax="100" style="width: 20%">
                      <span class="sr-only">20% Complete</span>
                    </div>
                  </div>
                  <div class="progress">
                    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60"
                      aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                      <span class="sr-only">60% Complete (warning)</span>
                    </div>
                  </div>
                  <div class="progress">
                    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80"
                      aria-valuemin="0" aria-valuemax="100" style="width: 80%">
                      <span class="sr-only">80% Complete</span>
                    </div>
                  </div>

                  <p>
                    <p>The striped gradient can also be animated. Add <code
                        class="highlighter-rouge">.progress-bar-animated</code> to <code
                        class="highlighter-rouge">.progress-bar</code> to animate the stripes right to left via CSS3
                      animations.</p>
                  </p>
                  <div class="progress">
                    <div class="progress-bar progress-bar-danger progress-bar-striped progress-bar-animated"
                      role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                      <span class="sr-only">60% Complete (warning)</span>
                    </div>
                  </div>

                </div>
                <!-- /.box-body -->
              </div>
              <!-- /.box -->
            </div>
            <!-- /.col (right) -->
          </div>
          <!-- /.row -->
          <div class="row">
            <div class="col-md-12 col-lg-6">
              <div class="box box-solid bg-dark">
                <div class="box-header with-border">
                  <h4 class="box-title">Vertical Progress Bars Different Sizes</h4>
                </div>
                <!-- /.box-header -->
                <div class="box-body text-center">
                  <p>By adding the class <code>.vertical</code> and <code>.progress-sm</code>, <code>.progress-xs</code>
                    or
                    <code>.progress-xxs</code> we achieve:</p>

                  <div class="progress vertical active">
                    <div class="progress-bar progress-bar-primary progress-bar-striped" role="progressbar"
                      aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="height: 40%">
                      <span class="sr-only">40%</span>
                    </div>
                  </div>
                  <div class="progress vertical progress-sm">
                    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="20"
                      aria-valuemin="0" aria-valuemax="100" style="height: 100%">
                      <span class="sr-only">100%</span>
                    </div>
                  </div>
                  <div class="progress vertical progress-xs">
                    <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar"
                      aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="height: 60%">
                      <span class="sr-only">60%</span>
                    </div>
                  </div>
                  <div class="progress vertical progress-xxs">
                    <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar"
                      aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="height: 60%">
                      <span class="sr-only">60%</span>
                    </div>
                  </div>
                </div>
                <!-- /.box-body -->
              </div>
              <!-- /.box -->
            </div>
            <!-- /.col (left) -->
            <div class="col-md-12 col-lg-6">
              <div class="box box-solid bg-dark">
                <div class="box-header with-border">
                  <h4 class="box-title">Vertical Progress bars</h4>
                </div>
                <!-- /.box-header -->
                <div class="box-body text-center">
                  <p>By adding the class <code>.vertical</code> we achieve:</p>

                  <div class="progress vertical">
                    <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="40"
                      aria-valuemin="0" aria-valuemax="100" style="height: 40%">
                      <span class="sr-only">40%</span>
                    </div>
                  </div>
                  <div class="progress vertical">
                    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"
                      aria-valuemin="0" aria-valuemax="100" style="height: 40%">
                      <span class="sr-only">40%</span>
                    </div>
                  </div>
                  <div class="progress vertical">
                    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0"
                      aria-valuemax="100" style="height: 20%">
                      <span class="sr-only">20%</span>
                    </div>
                  </div>
                  <div class="progress vertical">
                    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60"
                      aria-valuemin="0" aria-valuemax="100" style="height: 60%">
                      <span class="sr-only">60%</span>
                    </div>
                  </div>
                  <div class="progress vertical">
                    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80"
                      aria-valuemin="0" aria-valuemax="100" style="height: 80%">
                      <span class="sr-only">80%</span>
                    </div>
                  </div>
                </div>
                <!-- /.box-body -->
              </div>
              <!-- /.box -->
            </div>
            <!-- /.col (right) -->
          </div>
          <!-- /.row -->
          <!-- END PROGRESS BARS -->

        </section>
        <!-- /.content -->
      </div>


    </div>


    <!-- jQuery 3 -->
    <script src="../../../assets/vendor_components/jquery/dist/jquery.min.js"></script>

    <!-- popper -->
    <script src="../../../assets/vendor_components/popper/dist/popper.min.js"></script>

    <!-- Bootstrap 4.0-->
    <script src="../../../assets/vendor_components/bootstrap/dist/js/bootstrap.min.js"></script>

    <!-- SlimScroll -->
    <script src="../../../assets/vendor_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>

    <!-- FastClick -->
    <script src="../../../assets/vendor_components/fastclick/lib/fastclick.js"></script>

    <!-- 洲博通 App -->
    <script src="../../js/template.js"></script>

    <!-- 洲博通 for demo purposes -->
    <script src="../../js/demo.js"></script>


  </body>

</html>